import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Row, Col, Select } from 'antd';
import React from 'react';
import styles from './style.less'
import { _handoverDept } from '../../lostItemInfoManage/components/_data'

const HandoverForm = props => {
  const { handoverVisible, form, onCancel } = props;


  // 表单格式
  const layout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };

  // 确认
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;

    });
  };

  return (
    <>
      <Modal
        className={styles.handoverForm}
        title={[
          <div key="title">交接</div>
        ]}
        visible={handoverVisible}
        onOk={okHandle}
        onCancel={() => onCancel()}
      >
        <Row>
          <Col span={24}>
            <Form.Item
              {...layout}
              label="交接部门"
            >
              {form.getFieldDecorator('handoverDept', {
                rules: [
                  {
                    required: true,
                    message: '请选择交接部门'
                  }
                ]
              })(<Select>
                {
                  _handoverDept.map(item => (
                    <Select.Option value={item.id}>{item.name}</Select.Option>
                  ))
                }
              </Select>)}
            </Form.Item>
          </Col>
        </Row>
      </Modal>
    </>
  );
};

export default Form.create()(HandoverForm);
